import "../assets/sass/home_page/header/header.css";
<<<<<<< HEAD
import logo from "../assets/image/home_page/logo.svg";
import tiphot from "../assets/image/home_page/tiphot.svg";
import { NavLink } from "react-router-dom";
import { useRef, useState } from "react";
import { UpCircleOutlined, AndroidOutlined, AppleOutlined, ExclamationOutlined, AliwangwangOutlined, CarryOutOutlined, DownOutlined, SearchOutlined } from '@ant-design/icons';
import { Button, Dropdown, Form, Input, MenuProps, Space, Tooltip, Typography, message, FormProps } from 'antd';
import Request from '../utils/Request'
import { useCallbackState } from '../component/hook/Hook'
// import type { TabsProps } from 'antd';
const Header = () => {
  const [isModalOpen, setIsModalOpen] = useState(false);
  const [messageApi, contextHolder] = message.useMessage();
  const divs = useRef<HTMLDivElement>(null)
  const [cnm, setcnm] = useState(false)
  const [cnm1, setcnm1] = useState(false)
  const [data, setdata] = useCallbackState(false)
  const [cnmd, setcnmd] = useState(true)
  
  window.addEventListener('scroll', () => {
    if (window.scrollY >= 200) {
      setIsModalOpen(true)
    }
    else {
      setIsModalOpen(false)
    }
  })
  const [dispaly, setdispaly] = useState(false);
  const [displays, setdisplays] = useState(true);
  const [cengs, setcengs] = useState(true)
  type FieldType = {
    username?: string;
    password?: string;
    remember?: string;
  };

  const onFinish: FormProps<FieldType>['onFinish'] = (values) => {
    console.log('Success:', values);
    Request.post('/user/list', {
      userName: values.username,
      password: values.password
    }).then((res: any) => {
      console.log(res)
      if (res.data.code == 200) {
        localStorage.setItem('token', res.data.code)
        messageApi.open({
          type: 'success',
          content: '登录成功',
        });
        setdispaly(false);
      } else {
        messageApi.open({
          type: 'error',
          content: '账号密码错误',
        })

      }
    })
  };

  const onFinishFailed: FormProps<FieldType>['onFinishFailed'] = (errorInfo) => {
    console.log('Failed:', errorInfo);
  };
  const list: any = [
    {
      img: cengs ? ('/src/assets/image/home_page/side_menu/mail-active.svg') : ('/src/assets/image/home_page/side_menu/weixin-active.svg'),
      title: cengs ? ('手机号') : ('微信'),
    },
    {
      img: '/src/assets/image/home_page/side_menu/phone-active.svg',
      title: '邮箱'
    },
    {
      img: '/src/assets/image/home_page/side_menu/QQ-active.svg',
      title: '企业微信'
    },
    {
      img: '/src/assets/image/home_page/side_menu/wechat_active@2x.png',
      title: 'QQ'
    },
  ]
  // const { Option } = Select;
  const phone = () => {
    setcengs(false)
    if (cengs == false) {
      setcengs(true)
    }
  }
  const we_that = () => {
    setdisplays(true)
  }
  const xiu_that = () => {
    setdisplays(false)
  }
  const handleOk = () => {
    setdispaly(true);
    setcnm(true)
    setTimeout(() => {
      setcnm1(true)
    }, 0)
  };
  const onlicks = () => {
    setdispaly(false);
    setcnm1(false)
    setdata({}, () => {
      setcnmd(false)
      console.log("啦啦啦，我是回调方法", cnmd);
    })
    setTimeout(() => {
      setcnm(false)
    }, 0)
  }
  const dianji = (index: any) => {
    if (index == 0) {
      setcengs(false)
      if (cengs == false) {
        setcengs(true)
      }
    }
  }
  const items: MenuProps['items'] = [
    {
      key: '1',
      label: 'Item 1',
    },
    {
      key: '2',
      label: 'Item 2',
    },
    {
      key: '3',
      label: 'Item 3',
    },
  ];
  return (
    <div>
      {contextHolder}
      <div className="dingwei_one">
        <div className="dingwei_img">
          <img src="/src/assets/image/home_page/side_menu/huiyuan.png" alt="" />
        </div>
        <div className="dingwei_img" id="kefu">
          <img src="/src/assets/image/home_page/side_menu/qiyecaigou.png" alt="" />
          <div className="kefu">
            <img src="/src/assets/image/home_page/side_menu/kefu.png" alt="" />
          </div>
        </div>
        <div className="dingwei_img">
          <ExclamationOutlined></ExclamationOutlined>
          <br />
          帮助
        </div>
        <div className="dingwei_img">
          <AliwangwangOutlined></AliwangwangOutlined>
          <br />
          客服
        </div>
        <div className="dingwei_img">
          <CarryOutOutlined></CarryOutOutlined>
          <br />
          意见
        </div>
        <div className="dingwei_img">
          <a href="#top"><UpCircleOutlined></UpCircleOutlined>
            <br />
            置顶</a>
        </div>
      </div>
      <div className={dispaly ? 'dings' : 'dings1'} onClick={onlicks}>
        X
      </div>
      <div style={{ opacity: cnm1 == false ? '0' : '1', pointerEvents: cnm1 == false ? "none" : "all" }} className='divBG' ref={divs}>
        <div className="tan">
          <div className="tan_left">
            <img src="/src/assets/image/home_page/side_menu/yiqixiu.png" alt="" />
          </div>
          <div className="tan_right">
            <div className="tanright_top" onClick={phone}>
              <div className="phones">{cengs ? '手机号登录' : '微信扫码登录'}</div>
              <img src={cengs ? "/src/assets/image/home_page/side_menu/shouji.png" : "/src/assets/image/home_page/side_menu/saoma.png"} alt="" />
            </div>
            <div className="tanright_center">
              {cengs ? (<><div className={displays ? "we_that" : 'wes_that'} onClick={we_that}>
                <AndroidOutlined></AndroidOutlined>微信扫码登录
              </div><div className={displays ? "xiu_that" : 'xius_that'} onClick={xiu_that}>
                  <AppleOutlined></AppleOutlined>易企秀APP扫码登录
                </div></>) :
                (<>
                  <h2>手机密码登录</h2>
                </>)}
            </div>
            <div className="tanright_centertwo">
              {
                cengs ? (<div className='we_thatlogin'>
                  <p>{displays ? '未注册的微信号将自动创建账号' : '请使用易企秀APP扫码登录'}</p>
                  <img className="images" src={displays ? '/src/assets/image/home_page/side_menu/we_that.png' : '/src/assets/image/home_page/side_menu/xiu_that.png'} alt="" />
                </div>) : (
                  <>
                    <Form
                      name="basic"
                      labelCol={{ span: 8 }}
                      wrapperCol={{ span: 16 }}
                      style={{ maxWidth: 600 }}
                      initialValues={{ remember: true }}
                      onFinish={onFinish}
                      onFinishFailed={onFinishFailed}
                      autoComplete="off"
                    >
                      <Form.Item<FieldType>
                        label="手机号"
                        name="username"
                        rules={[{ required: true, message: 'Please input your username!' }]}
                      >
                        <Input className="input_one" />
                      </Form.Item>

                      <Form.Item<FieldType>
                        label="密码"
                        name="password"
                        rules={[{ required: true, message: 'Please input your password!' }]}
                      >
                        <Input type="password" className='input_one' />
                      </Form.Item>
                      <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
                        <Button type="primary" htmlType="submit" className="input_one">
                          点击登录
                        </Button>
                      </Form.Item>
                    </Form></>

                )
              }

              {/* <div className="xiu_thatlogin">
<p>请使用易企秀APP扫码登录</p>
<img src="/src/assets/image/home_page/side_menu/xiu_that.png" alt="" />
                  </div> */}
            </div>

            <p className="ps">
              --------------- 其他登录方式 ---------------
            </p>
            <div className="tanright_centerthree">
              <div className="tu_biao">
                {
                  list.map((item: any, index: any) => (
                    <div className="tu_piao" onClick={() => { dianji(index) }} key={index}>
                      <img className="images_one" src={item.img} alt="" />
                      <div className="pas">
                        {
                          item.title
                        }
                      </div>
                    </div>
                  ))
                }
                <div className="tu_piao">
                  ...
                  <div className="pas">
                    更多方式
                  </div>
                </div>
              </div>

            </div>
            <div className="btn_buttom">
              <div className="btn_left">
                您登录即同意易企秀《用户服务协议》《隐私政策》《授权许可协议》，如您成为易企秀会员，即视为同意《会员服务协议》
              </div>
              <div className="btn_right">
                手机号注册
              </div>
            </div>

          </div>

        </div>

      </div>
      <div className="header">
        <div className="header_left">
          <div className="logo">
            <img src={logo} />
          </div>
          <div className="header_tab">
            <NavLink className="header_tab_item" to={"/home/free_templates"}>
              免费模板
              <div className="tiphot">
                <img src={tiphot} />
              </div>
            </NavLink>
            <NavLink className="header_tab_item" to={"/home/open_membership"}>
              开通会员
              <div className="vip_corner_2">
                <img src="/src/assets/image/home_page/vip_corner_2.png" />
              </div>
            </NavLink>
            <div className="header_tab_item">产品服务</div>
            <div className="header_tab_item">解决方案</div>
            <div className="header_tab_item">内容中台</div>
            <div className="header_tab_item">资源与合作</div>
          </div>

        </div>
        <div className={isModalOpen ? "centername" : 'centername1'}>
          <Dropdown
            menu={{
              items,
              selectable: true,
              defaultSelectedKeys: ['3'],
            }}
          >
            <Typography.Link>
              <Space style={{ width: "20%", height: "100%" }}>
                全部
                <DownOutlined />
              </Space>
            </Typography.Link>
          </Dropdown>
          <Input placeholder="Basic usage" style={{ width: "60%", height: "100%" }} />
          <Tooltip title="search">
            <Button className='btn' style={{ width: "20%", height: "100%", background: 'blue', color: '#fff' }} icon={<SearchOutlined />}></Button>
          </Tooltip>
        </div>
        <div className="header_right">
          <Button type="primary" onClick={handleOk}>登录/注册</Button>
          <div className="header_tip">
            <img src="/src/assets/image/home_page/header/header_tip.jpg" alt="" />
          </div>
        </div>

=======
import { Input, Select, Space, Button } from "antd";
import logo from "../assets/image/home_page/logo.svg";
import tiphot from "../assets/image/home_page/tiphot.svg";
import { NavLink, useLocation } from "react-router-dom";
import { CameraOutlined, SearchOutlined } from "@ant-design/icons";
import type { SearchProps } from "antd/es/input/Search";
import FeatcuredPicksPopup from "./Header/FeatcuredPicksPopup";
import OpenMembershipPopup from "./Header/OpenMembershipPopup";
import ProductsServicesPopup from "./Header/ProductsServicesPopup";
import SolutionPopup from "./Header/SolutionPopup";
import { useEffect, useRef, useState } from "react";
import LoginPopup from "./Header/LoginPopup";
import avatar from "../assets/image/home_page/header/avatar.svg";

const Header = () => {
  const { Search } = Input;
  const searchRef = useRef(null);
  const location = useLocation();

  const suffix = (
    <CameraOutlined
      style={{
        fontSize: 16,
        color: "#A1A1A1",
      }}
    />
  );
  const options = [
    {
      value: "全部",
      label: "全部",
    },
    {
      value: "H5",
      label: "H5",
    },
    {
      value: "海报",
      label: "海报",
    },
    {
      value: "长页",
      label: "长页",
    },
    {
      value: "表单",
      label: "表单",
    },
    {
      value: "互动",
      label: "互动",
    },
    {
      value: "电子画册",
      label: "电子画册",
    },
    {
      value: "视频",
      label: "视频",
    },
    {
      value: "解决方案",
      label: "解决方案",
    },
  ];

  const onSearch: SearchProps["onSearch"] = (value, _e, info) => {
    console.log(info?.source, value);
  };
  //滑动隐藏显示搜索框
  const [searchShow, setSearhchShow] = useState(false);
  const [workbenchBtnShow, setWorkbenchBtnShow] = useState(true);

  useEffect(() => {
    (async () => {
      window.addEventListener("scroll", () => {
        if (window.scrollY >= 120) {
          setSearhchShow(true);
        } else {
          setSearhchShow(false);
        }
      });
      if (location.pathname === "/home/free_templates/work_bench") {
        setWorkbenchBtnShow(false);
      }
    })();
  }, []);

  const [loginShow, setLoginShow] = useState(false);
  const goLogin = () => {
    setLoginShow(true);
  };
  const sendLoginPopup = {
    loginShow,
  };
  const [loginBtnShow, setLoginBtnShow] = useState(true);
  const token = localStorage.getItem("token");
  useEffect(() => {
    (async () => {
      if (token) {
        setLoginBtnShow(false);
      } else {
        setLoginBtnShow(true);
      }
    })();
  }, [loginShow, token]);

  //优惠券倒计时
  const [countdown, setCountdown] = useState({
    hours: 0,
    minutes: 0,
    seconds: 0,
    milliseconds: 0,
  });
  const timerRef = useRef(null);

  useEffect(() => {
    const targetDate = new Date("2024-06-30T21:00:10");
    const update = () => {
      const now = new Date();
      const distance = Number(targetDate) - Number(now);

      if (distance < 0) {
        clearInterval(timerRef.current);
        setCountdown({
          hours: 0,
          minutes: 0,
          seconds: 0,
          milliseconds: 0,
        });
        console.log("倒计时结束");
        return;
      }

      const hours = Math.floor(distance / 1000 / 60 / 60);
      const minutes = Math.floor((distance / 1000 / 60) % 60);
      const seconds = Math.floor((distance / 1000) % 60);
      const milliseconds = Math.floor(distance % 1000);

      setCountdown({
        hours,
        minutes,
        seconds,
        milliseconds,
      });
    };

    timerRef.current = setInterval(update, 1);

    // 清除定时器的函数
    return () => clearInterval(timerRef.current);
  }, []);

  const formatNumber = (num: number) => {
    return num < 10 ? `0${num}` : num;
  };

  return (
    <div className="header">
      <div className="header_left">
        <div className="logo">
          <img src={logo} />
        </div>
        <div className="header_tab">
          <NavLink
            className="header_tab_item header_item_1"
            to={"/home/free_templates/featcured_picks"}
          >
            <span>免费模板</span>
            <div className="tiphot">
              <img src={tiphot} />
            </div>
            <div className="featcured_picks_popup">
              <FeatcuredPicksPopup></FeatcuredPicksPopup>
            </div>
          </NavLink>
          <NavLink
            className="header_tab_item header_item_2"
            to={"/home/open_membership"}
          >
            <span>开通会员</span>
            <div className="vip_corner_2">
              <img src="/src/assets/image/home_page/vip_corner_2.png" />
            </div>
            <div className="word_bench_popup">
              <OpenMembershipPopup></OpenMembershipPopup>
            </div>
          </NavLink>
          <NavLink
            className="header_tab_item header_item_3"
            to={"/home/products_services"}
          >
            <span>产品服务</span>
            <div className="products_services_popup">
              <ProductsServicesPopup></ProductsServicesPopup>
            </div>
          </NavLink>
          <NavLink
            className="header_tab_item header_item_4"
            to={"/home/solution"}
          >
            <span>解决方案</span>
            <div className="solution_popup">
              <SolutionPopup></SolutionPopup>
            </div>
          </NavLink>
          <div className="header_tab_item">
            <span>内容中台</span>
          </div>
          <div className="header_tab_item">
            <span>资源与合作</span>
          </div>
        </div>
      </div>
      <div className="header_right">
        {searchShow && (
          <div className="content_search" ref={searchRef}>
            <Space.Compact>
              <Select
                defaultValue="全部"
                options={options}
                className="search_select"
              />
              <Search
                className="search_input"
                enterButton={<SearchOutlined />}
                placeholder="六一儿童节邀请函"
                size="large"
                suffix={suffix}
                onSearch={onSearch}
              />
            </Space.Compact>
          </div>
        )}
        {loginBtnShow ? (
          <Button type="primary" onClick={goLogin}>
            登录/注册
          </Button>
        ) : (
          <div className="login_in">
            {workbenchBtnShow && (
              <Button className="work_bench_btn">工作台</Button>
            )}
            <div className="coupon_img_box">
              <img
                className="coupon_img"
                src="/src/assets/image/home_page/header/coupon-img.gif"
              />
              <div className="coupon_img_popup">
                <div className="username">
                  {localStorage.getItem("username")}
                </div>
                <div className="coupons">
                  <div className="coupons_card">
                    您有<span>150</span>元会员优惠券，可立即使用
                  </div>
                  <div className="coupons_countdown">
                    优惠券倒计时：
                    <div className="coupons_countdown_inner">
                      <span>{formatNumber(countdown.hours)}</span>时
                      <span>{formatNumber(countdown.minutes)}</span>分
                      <span>{formatNumber(countdown.seconds)}</span>秒
                      <span>{formatNumber(countdown.milliseconds)}</span>毫秒
                    </div>
                  </div>
                </div>
                <div className="upgrade">立即升级</div>
                <div className="text">现在升级，立享优惠</div>
              </div>
            </div>

            <div className="avatar_box">
              <img src={avatar} className="avatar" />
              <div className="userinfo_popup"></div>
            </div>
          </div>
        )}
        <LoginPopup
          sendLoginPopup={sendLoginPopup}
          click={() => setLoginShow(false)}
        ></LoginPopup>
        {loginBtnShow && (
          <div className="header_tip">
            <img src="/src/assets/image/home_page/header/header_tip.jpg" />
          </div>
        )}
>>>>>>> 040b22f (改版)
      </div>
    </div>
  );
};

export default Header;
